<template>
  <div class="member-home">
    <!--概览组件 -->
    <homeOverview></homeOverview>
    <!-- 收藏 -->
    <homePanel title="我的收藏">
      <!-- 商品列表 -->
      <goodsItem
        v-for="item in collectList"
        :key="item.id"
        :goods="item"
      ></goodsItem>
    </homePanel>
    <!-- 足迹 -->
    <homePanel title="我的足迹">
      <goodsItem v-for="i in 4" :key="i" :goods="goods"></goodsItem>
    </homePanel>
    <!-- 猜你喜欢 -->
    <goodsRelevant></goodsRelevant>
  </div>
</template>

<script>
import { ref } from 'vue'
import homeOverview from './components/home-overview'
import homePanel from './components/home-panel'
import goodsRelevant from '@/views/goods-detail/components/goods-relevant.vue'
import goodsItem from '@/views/category/components/goods-item.vue'
import { findCollect } from '@/api/member'
export default {
  name: 'MemberHome',
  components: { homeOverview, homePanel, goodsRelevant, goodsItem },
  setup() {
    // 我的收藏
    const collectList = ref(null)
    findCollect({ page: 1, pageSize: 4 }).then((data) => {
      console.log(data, 'data')
      collectList.value = data.result.items
    })

    // 我的足迹
    const goods = {
      id: '1',
      name: '活虾现剥，弹滑南美虾仁',
      picture:
        'https://yanxuan-item.nosdn.127.net/d9560b2f2545fd9ee435be354c726b77.jpg',
      desc: '饱满紧实，只只整虾',
      price: '59.00'
    }
    return { collectList, goods }
  }
}
</script>
<style scoped lang="less">
:deep(.xtx-carousel) .carousel-btn.prev {
  left: 5px;
}
:deep(.xtx-carousel) .carousel-btn.next {
  right: 5px;
}
</style>
